<template>
	<view class="registered" >
		<view class="h1">
			手机注册
		</view>
		<u-form :model="formData" ref="uForm" :error-type="errorType">
			<u-form-item prop="name" label-position='top' :label-style="labelStyle">
				<u-input 
				:custom-style='inputStyle' 
				placeholder-style="color: #cdcdf5;font-weight: 600;opacity: 0.2;" 
				placeholder="昵称" 
				v-model="formData.name" />
			</u-form-item>
			<u-form-item prop="mobile" label-position='top' :label-style="labelStyle">
				<view class="mobile" style="width: 100%;">
					<u-input
					:custom-style='inputStyle' 
					placeholder-style="color: #cdcdf5;font-weight: 600;opacity: 0.2;" 
					placeholder="手机号" 
					v-model="formData.mobile" />
				</view>
				<u-button class="code" size="mini" slot="right" type="success" @click="getCode">{{codeText}}</u-button>
				<u-verification-code ref="uCode" @change="codeChange"></u-verification-code>
			</u-form-item>
			<u-form-item prop="code" label-position='top' :label-style="labelStyle">
				<u-input 
				:custom-style='inputStyle' 
				placeholder-style="color: #cdcdf5;font-weight: 600;opacity: 0.2;" 
				placeholder="验证码" 
				v-model="formData.code" />
			</u-form-item>
		</u-form>
		<u-button 
		:loading="loading"
		:class="{activeSubmit:formData.name && formData.mobile && formData.code}" 
		:hair-line="btnBorder" 
		class="submit" 
		@click="submit">下一步</u-button>
		<view class="btn">
			已有账号？<text @click="login">登录</text>
		</view>
		<u-toast ref="uToast" />
	</view>
</template>
<script>
	export default {
		data() {
			return {
				loading:false,
				btnBorder:false,//隐藏注册按钮边框
				inputStyle:{color:'#ffffff'},//输入框样式
				labelStyle:{color:"#ffffff"},//label样式
				errorType: ['message','border-bottom'],//错误提示
				codeText: '获取验证码',//获取验证码
				formData: {
					name: '', //昵称
					mobile: '', //手机号
					code: '',//验证码
					
				},
				rules: {
					name: [{
						required: true,
						message: '请输入姓名',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}],
					mobile: [{
						required: true,
						message: '请输入手机号',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					},
					{
						pattern:/^1[3456789]\d{9}$/,
						// 正则检验前先将值转为字符串
						transform(value) {
							return String(value);
						},
						trigger: 'blur,change',
						message: '请输入正确的手机号码'
					}],
					code: [{
						required: true,
						message: '请输入验证码',
						// 可以单个或者同时写两个触发验证方式
						trigger: 'blur,change'
					}]
					
				}
			}
		},
		onReady() {
			this.$refs.uForm.setRules(this.rules);
		},
		onLoad() {

		},
		methods: {
			//去登录
			login(){
				uni.redirectTo({
				    url: '/pages/Login/index'
				});
			},
			//获取验证码
			codeChange(text) {
				this.codeText = text;
			},
			getCode() {
				if(!this.formData.mobile){
					this.$u.toast('请输入正确的手机号');
					return
				}
				if (this.$refs.uCode.canGetCode) {
					// 模拟向后端请求验证码
					uni.showLoading({
						title: '正在获取验证码'
					})
					this.$http({
						url:this.$api.SendSms,
						method:'POST',
						data:{phone:this.formData.mobile},
						success:res=>{
							this.$refs.uToast.show({
								title: res.msg,
								type: 'success'
							})
						},
						complete:res=>{
							uni.hideLoading();
							// 通知验证码组件内部开始倒计时
							this.$refs.uCode.start();
						}
					})
				} else {
					this.$u.toast('倒计时结束后再发送');
				}
			},
			//提交
			submit() {
				this.$refs.uForm.validate(valid => {
					if (valid) {
						//console.log('验证通过');
						this.loading = true
						this.$http({
							url:this.$api.confirmcode,
							method:'POST',
							hideLoading:false,
							data:{
								phone:this.formData.mobile,
								code:this.formData.code
							},
							success:res=>{
								uni.navigateTo({
								    url: `/pages/Registered/pwd?name=${this.formData.name}&mobile=${this.formData.mobile}&code=${this.formData.code}`
								});
							},
							complete:e=>{
								this.loading = false
							}
							
						})
						
					} else {
						//console.log('验证失败');
					}
				});
			}
		}
	}
</script>

<style lang="less" scoped>
	.registered{
		padding: 0 50rpx;
		.h1{
			font-size: 24px;
			color: #cdcdf5;
			font-weight: 600;
			margin:150rpx 0 80rpx 0;
		}
		.mobile{
			display: flex;
		}
		.code{
			background-color:transparent;
			color: #5c67ff;
			font-weight: 600;
		}
		.submit{
			background-color: rgba(205,205,245,0.2);
			color: rgba(255,255,255,0.2);
			margin-top: 80rpx;
			border-color: #181818;
			font-size: 18px;
			font-weight: 600;
			height: 42px;
		}
		.activeSubmit{
			color: #FFFFFF;
			background-color: #5f6aff;
		}
		::v-deep .u-border-bottom:after{
			border-color: rgba(255,255,255,0.2);
		}
		.btn{
			width: 100%;
			position: fixed;
			bottom: 80rpx;
			left: 0;
			text-align: center;
			color: #4f5066;
			font-weight: 600;
			text{
				color: #5f6aff;
			}
		}
		::v-deep .u-form-item{
			padding: 30rpx 0 0rpx 0;
		}
		::v-deep .u-form-item__message{
			color: #FFFFFF;
			margin-bottom: 12rpx;
			margin-top: 0;
		}
		::v-deep .u-form-item--right__content{
			height: 70rpx;
		}
	}
</style>
